<template>
  <div class="contentPage">
    <div class="contentM">

      <h2><span>已缴费学生查询</span></h2>

      <div class="topSearch">
        <div class="searchBOx">
          <em>身份证号：</em>
          <el-input v-model="searchBox.idCardNum" autocomplete="off" style="width:200px;" size="small"></el-input>
          <el-button type="primary" @click="getList('2')" size="mini">查询</el-button>
        </div>
      </div>

      <div class="contentN">
        <el-table :data="billList" style="width: 100%">
          <el-table-column type="index" label="序号" width="80"></el-table-column>
          <el-table-column prop="studentName" label="缴费学生"></el-table-column>
          <el-table-column prop="projectName" label="缴费方案"></el-table-column>
          <el-table-column prop="money" label="缴费金额"></el-table-column>
          <el-table-column label="电子收据">
            <template slot-scope="scope">
               <el-link @click="watchDetail(scope.row)" type="primary">查询</el-link>
            </template>
          </el-table-column>
        </el-table>
      </div>

    </div>
    <!-- 手机验证 -->
    <el-dialog title="缴费用户认证" :visible.sync="!$store.getters.GetHavePass" :append-to-body="true" width="30%" :close-on-press-escape="false" :close-on-click-modal="false" :show-close="false">
      <el-form :model="form">
        <el-form-item label="请输入手机号" :label-width="formLabelWidth">
          <el-input v-model="form.phoneNum" autocomplete="off" style="width:200px;"></el-input>
          <!-- <el-button type="primary" @click="sentMessage">发送短信</el-button> -->
        </el-form-item>
        <!-- <el-form-item label="请输入验证码" :label-width="formLabelWidth">
          <el-input v-model="form.verificationCode" autocomplete="off" style="width:200px;"></el-input>
        </el-form-item> -->
        <el-form-item :label-width="formLabelWidth">
          <el-button style="width:100px;" @click="backHome">返回首页</el-button>
           <el-button type="primary" style="width:100px;" @click="makeSure">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 查看发票 -->


    <div class="printBox" id="printBox" v-if="showViewer">
      <!-- <span class="close"  v-if="closebtshow" @click="closeImgLayer"><i class="el-icon-circle-close"></i></span> -->
      <div class="invoice" id="invoice">
        <span class="close"  v-if="closebtshow" @click="closeImgLayer"><i class="el-icon-circle-close"></i></span>
            <div class="invoiceTop">
              <h3>
                <span class="logo"><img src="./../assets/images/zpLogo_03.png"></span>收款专用收据<em>NO.{{detailMesDY.serialNumber}}</em>
                <div class="clear"></div>
                </h3>

              <P><span>姓名:{{detailMesDY.studentName}}</span><span>年级：{{detailMesDY.gradeName}}</span><span>班级:<em v-if="detailMesDY.className==null||detailMesDY.className==''||detailMesDY.className==undefined">未设置分班</em><em v-else>{{detailMesDY.className}}</em></span><span>联系方式:{{detailMesDY.mobile}}</span><span>收款日期:{{timeSet.year}}年{{timeSet.mounth}}月{{timeSet.day}}日</span></P>
            </div>
            <div class="invoiceCenter">
              <div class="fakeTable">
                <div class="fakeTableHeader">
                  <div style="flex:4"><em>项目</em></div>
                  <div style="flex:2"><em>数量</em></div>
                  <div style="flex:2"><em>单价</em></div>
                  <div style="flex:9">
                    <div><em>金额</em></div>
                    <div><span>佰</span><span>拾</span><span>万</span><span>仟</span><span>佰</span><span>拾</span><span>元</span><span>角</span><span>分</span></div>
                  </div>
                  <div style="flex:2"><em>备注</em></div>
                </div>
                <div class="fakeTableBody">
                  <div class="fakeTableBodyN" v-for="(a,index) in detailMesDY.itemList" v-show="detailMesDY.isDetailed==1" :key="index">
                    <div style="flex:4"><em>{{a.itemName}}</em></div>
                    <div style="flex:2"><em>1</em></div>
                    <div style="flex:2"><em>{{a.money}}</em></div>
                    <div style="flex:9">
                      <div>
                        <span v-for="(b,index2) in 9-a.listMoney.length" :key="'B'+index2"></span>
                        <span v-for="(c,index3) in a.listMoney" :key="'C'+index3">{{c}}</span>
                      </div>
                    </div>
                    <div style="flex:2"></div>
                  </div>
                  <div class="fakeTableBodyN" v-if="tuifei">
                    <div style="flex:4"><em>减免金额</em></div>
                    <div style="flex:2"><em>1</em></div>
                    <div style="flex:2"><em>{{jianmianNum}}</em></div>
                    <div style="flex:9">
                      <div>
                        <span v-for="(b,index4) in 9-jianmianList.length" :key="'B'+index4"></span>
                        <span v-for="(c,index5) in jianmianList" :key="'C'+index5">{{c}}</span>
                      </div>
                    </div>
                    <div style="flex:2"></div>
                  </div>
                  <div class="fakeTableBodyN">
                    <div style="flex:6;">
                      <em v-if="detailMesDY.isDetailed!=1">
                        <font style="display: inline-block; width:66%;">收费项</font><font style="display: inline-block; width:35%;">1</font>
                      </em>
                      <em v-else></em>
                    </div>
                    <div style="flex:2;"><em>合计</em></div>
                    <div style="flex:9;">
                      <div>
                        <span v-for="(d,index4) in 9-totalMoney.length" :key="'D'+index4"></span>
                        <span v-for="(e,index5) in totalMoney" :key="'E'+index5">{{e}}</span>
                      </div>
                    </div>
                    <div style="flex:2;"></div>
                  </div>
                  <div class="fakeTableBodyN">
                    <div style="flex:17;">
                      <em ref="daxie" id="daxie" style="text-align:left; padding:10px;">金额大写(大写):
                        <!-- <i v-for="(f,index6) in 9-totalMoney.length" :key="'F'+index6"></i>
                        <i v-for="(g,index7) in totalMoney" :key="'G'+index7">{{g|newmoney}}{{(index7)}}</i> -->
                        <i>{{totalMoney[0]|newmoney}}佰</i>
                        <i>{{totalMoney[1]|newmoney}}拾</i>
                        <i>{{totalMoney[2]|newmoney}}万</i>
                        <i>{{totalMoney[3]|newmoney}}仟</i>
                        <i>{{totalMoney[4]|newmoney}}佰</i>
                        <i>{{totalMoney[5]|newmoney}}拾</i>
                        <i>{{totalMoney[6]|newmoney}}元</i>
                        <i>{{totalMoney[7]|newmoney}}角</i>
                        <i>{{totalMoney[8]|newmoney}}分</i>
                        <!-- <i>拾</i><i>万</i><i>仟</i><i>佰</i><i>拾</i><i>元</i><i>角</i><i>分</i> -->
                      </em>
                      </div>
                    <div style="flex:2;"><em></em></div>
                  </div>
                  <div class="fakeTableBodyN">
                    <div style="flex:19; border-top:1px solid #000;">
                      <em style="text-align:left; padding:10px;">
                        <i>收款方式:</i>
                        <i>现金<font v-if="detailMesDY.cashMoney=='1'" style=" font-weight:bold; font-size: 22px; line-height: 0.7em; text-indent: -0.2em;">√</font><font v-else></font></i>
                        <i>转账<font v-if="detailMesDY.transferMoney=='1'" style=" font-weight:bold; font-size: 22px; line-height: 0.7em; text-indent: -0.2em;">√</font><font v-else></font></i>
                        <i>刷卡<font v-if="detailMesDY.cardMoney=='1'" style=" font-weight:bold; font-size: 22px; line-height: 0.7em; text-indent: -0.2em;">√</font><font v-else></font></i>
                        <i>微信公众号<font v-if="detailMesDY.onLineMoney=='1'||detailMesDY.onLineMoney==null" style=" font-weight:bold; font-size: 22px; line-height: 0.7em; text-indent: -0.2em;">√</font><font v-else></font></i>
                        <i>其他方式<font v-if="detailMesDY.otherMoney=='1'" style=" font-weight:bold; font-size: 22px; line-height: 0.7em; text-indent: -0.2em;">√</font><tt v-else></tt></i>
                      </em>
                      </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="imgBox">
              <img class="yin" :src="detailMesDY.baseUrl+detailMesDY.sealUrl">
            </div>
            <div class="invoiceBottom">
              <p><span>开票单位:{{detailMesDY.schoolName}}</span><span style="float:right">收款人:<em v-if="detailMesDY.onLineMoney=='1'||detailMesDY.onLineMoney==null">线上收款</em><em v-else>线下收款</em></span></p>
            </div>
      </div>

      <div class="bts" v-if="btshow"><el-button type="primary" @click="printImg" style="width:120px">打印</el-button></div>
    </div>



  </div>
</template>

<script>
import html2canvas from 'html2canvas';
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
export default {
  // FIXME:数据内容
  data() {
    return {
      ccc:'支付查询页面',
      dialogVisible:false,
      drawer:false,
      tuifei:true,
      detailMesDY:{
        grade:'一年级'
      },
      jianmianList:[],
      jianmianNum:0,
      totalMoney:[],
      timeSet:{
        year:'',
        mounth:'',
        day:''
      },
      showViewer:false,
      btshow:true,
      closebtshow:true,
      url:'',
      imgUrl:'',
      direction:'rtl',
      formLabelWidth:'120px',
      form:{
        phoneNum:'',
        verificationCode:'',
      },
      searchBox:{
        idCardNum:''
      },
      billList:[
      ]
    }
  },
  components: { ElImageViewer },
  filters:{
    newmoney:function(val){
      var oldfont = "";
      if(!val)return '--';
      switch(val){
        case "0":
          oldfont = "零";
          break;
          case "1":
          oldfont = "壹";
          break;
          case "2":
          oldfont = "贰";
          break;
          case "3":
          oldfont = "叁";
          break;
          case "4":
          oldfont = "肆";
          break;
          case "5":
          oldfont = "伍";
          break;
          case "6":
          oldfont = "陆";
          break;
          case "7":
          oldfont = "柒";
          break;
          case "8":
          oldfont = "捌";
          break;
          case "9":
          oldfont = "玖";
          break;
          default:
          oldfont = "";
      }
      return oldfont;
    }
  },
  mounted() {
    // this.noBack();
    this.haveLogin();
    if(this.$store.getters.GetPhoneNum){
      this.getList("1");
    }
  },
  methods: {
    // 判断是否有验证
    haveLogin:function(){
      this.$store.commit('SetCanBack',true);
      if(!this.$store.getters.GetHaveLogin){
        this.backHome();
      }
    },
    // TODO: 返回首页
    backHome:function(){
      this.$router.push({name:'enterPage'});
    },
    // FIXME:发送短信
    sentMessage:function(){
      var url = '/common/send/message';
      var params = {mobile:this.form.phoneNum};
      this.$post(url,params).then(res=>{
        console.log(res);
        if(res.data.status=='SUCCESS'){
          this.$message({
            message:'短信发送成功!请填写验证码',
            type:'success'
          })
          // this.billList = res.data.result;
        }
      })
    },
    // FIXME:验证验证码
    makeSure:function(){
      this.$store.commit('SetPhoneNum',this.form.phoneNum);
      this.$store.commit('SetHavePass',true);
      this.getList("1");
      // var url = '/common/check/message';
      // var params = {mobile:this.form.phoneNum,code:this.form.verificationCode};
      // this.$post(url,params).then(res=>{
      //   console.log(res);
      //   if(res.data.status=='SUCCESS'){
      //     this.$message({
      //       message:'短信验证成功',
      //       type:'success'
      //     })
      //     this.dialogVisible = false;
      //     this.$store.commit('SetPhoneNum',this.form.phoneNum);
      //     this.$store.commit('SetHavePass',true);
      //     this.getList();
      //   }
      // })
    },
    // TODO:手机号验证
    verificationNum:function(num){
      var reg = /^1[3|4|5|7|8][0-9]{9}$/; //验证规则
      return reg.test(num);
    },
    // 判断是否保存过电话
    isHaveNumber:function(){

    },
    // TODO:获取列表
    getList:function(type){
      // if(this.searchBox.idCardNum==''||this.searchBox.idCardNum==null||this.searchBox.idCardNum==undefined){
      //   this.$message({
      //     message:'请输入手机号进行查询!',
      //     type:'warning'
      //   })
      //   return;
      // }
      // if(!this.verificationNum(this.searchBox.idCardNum)){
      //   this.$message({
      //     message:'请输入正确的手机号!',
      //     type:'warning'
      //   })
      //   return;
      // }
      // console.log(this.verificationNum(this.searchBox.idCardNum));
      var url = '/api/payment/load/serial/list';
      // var params = {mobile:this.searchBox.idCardNum}
      var params ={};
      if(type=='1'){
        params ={mobile:this.$store.getters.GetPhoneNum,}
      }else{
        params ={identityCardNumber:this.searchBox.idCardNum}
      }
      // var params = {mobile:this.$store.getters.GetPhoneNum,identityCardNumber:this.searchBox.idCardNum}
      this.$post(url,params).then(res=>{
        console.log("获取学费列表",res)
        this.billList = res.data.result;
      })
    },
    watchDetail:function(obg){
      this.jianmianList = [];
      this.detailMesDY = {};
      this.tuifei = true;
      this.$store.commit('SetHeaderShow',false);
      var url = '/api/payment/load/serial/detail';
      var params = {projectId:obg.projectId,studentId:obg.studentId}
      this.$post(url,params).then(res=>{
        console.log("获取详情",res)
        this.detailMesDY = res.data.result;
        if(res.data.result.tuitionMoney==null||res.data.result.tuitionMoney==undefined||res.data.result.tuitionMoney==""||parseFloat(res.data.result.tuitionMoney).toFixed(2)*1000==0){
          this.tuifei = false;
        }
        // var riqi = new Date();
        // this.timeSet.year = riqi.getFullYear();
        // this.timeSet.mounth = riqi.getMonth();
        // this.timeSet.day = riqi.getDate();
        var dateListN = this.detailMesDY.date.split("-");
        this.timeSet.year = dateListN[0];
        this.timeSet.mounth = dateListN[1];
        this.timeSet.day = dateListN[2].slice(0,2);

        this.setMoneys();
        this.showViewer = true
      })
    },
    // 阻止后退
    noBack:function(){
      history.pushState(null, null, document.URL);
      window.addEventListener('popstate', function () {
          history.pushState(null, null, document.URL);
      });
    },
    // TODO:设置数字
    setMoneys:function(){
      var that = this;
      var newList = new Array();
      var tNum = 0;
      that.detailMesDY.itemList.forEach(function(val,index){
        that.detailMesDY.itemList[index].money = (parseFloat(val.money).toFixed(2)*1000)/1000;
        that.detailMesDY.itemList[index].listMoney = [];
        tNum +=parseFloat(val.money).toFixed(2)*1000;
        var list = new Array();
        var arr = parseFloat(val.money).toFixed(2).split('');
        for(var i=0,len = arr.length;i<len;i++){
          list.push(arr[i]);
        }
        that.detailMesDY.itemList[index].listMoney = that.dropListE('.',list);
      })
      that.jianmianNum = parseFloat(that.detailMesDY.tuitionMoney==null?0:parseFloat(that.detailMesDY.tuitionMoney).toFixed(2)*1000>0?that.detailMesDY.tuitionMoney:-(that.detailMesDY.tuitionMoney)).toFixed(2);
      var allNum = (tNum-parseFloat(that.detailMesDY.tuitionMoney==null?0:parseFloat(that.detailMesDY.tuitionMoney).toFixed(2)*1000>0?that.detailMesDY.tuitionMoney:-(that.detailMesDY.tuitionMoney)).toFixed(2)*1000)/1000;
      that.detailMesDY.tuitionMoney = parseFloat(that.detailMesDY.tuitionMoney==null?0:parseFloat(that.detailMesDY.tuitionMoney).toFixed(2)*1000>0?that.detailMesDY.tuitionMoney:-(that.detailMesDY.tuitionMoney)).toFixed(2).split('');
      for(var p=0,lenn = that.detailMesDY.tuitionMoney.length;p<lenn;p++){
        that.jianmianList.push(that.detailMesDY.tuitionMoney[p]);
      }
      that.jianmianList = that.dropListE('.',that.jianmianList);
      // var allNum = (tNum-parseFloat(that.detailMesDY.tuitionMoney==null?0:-(that.detailMesDY.tuitionMoney)).toFixed(2)*1000)/1000;
      // that.totalMoney = that.dropListE('.',parseFloat(allNum).toFixed(2).split(''));
      that.totalMoney = that.dropListE('.',(parseFloat(allNum).toFixed(2)*1000>0?allNum:-(allNum)).toFixed(2).split(''));
      var lastIndex = 9-that.totalMoney.length;
      for(var a=0,lenn =lastIndex;a<lenn;a++){
        that.totalMoney.unshift("");
      }
      // console.log(lastIndex);
      // console.log(that.detailMesDY.itemList);
      // console.log(that.totalMoney);
      // console.log(that.jianmianList);
    },
    // TODO:数组删除
    dropListE:function(str,arr){
      var index = arr.indexOf(str);
      arr.splice(index,1);
      return arr;
    },
    saveImg:function(){
      var that = this;
      html2canvas(document.getElementById("invoice"),{scale:2}).then(function(canvas){
        that.imgUrl = canvas.toDataURL("image/png");
      })
      this.showViewer = true;
      // this.drawer = false;
    },
    printImg(){
      this.btshow = false;
      setTimeout(function(){
        window.print(document.getElementById("printBox"));
      },1000)
    },
    closeImgLayer:function(){
      this.showViewer = false;
      this.$store.commit('SetHeaderShow',true);
      this.btshow = true;
    },
    // 关闭查看器
    closeViewer() {
      this.showViewer = false
    },
    // 下载收据
    downLoad:function(){

    }
  },
}
</script>

<style>

</style>
